
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-model-item label="年份">
                   <year-select :show-all="true" :value.sync="queryParam.startDate" :value2.sync="queryParam.endDate" />
                </a-form-model-item>
            </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
       <a-upload
         zname="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :data="{ flag: flag}"
        :action="importExcelUrl"
        @change="handleImportExcel"
        :beforeUpload="beforeUpload"
      >
      <a-button icon="import" ref="importFile" >导入</a-button>
      </a-upload>
      <a-button icon="download" @click="DownloadData(selectedRowKeys)" v-if="selectedRowKeys.length > 0">导出</a-button>
      <a-button icon="download" @click="DownloadModel()">下载导入模板</a-button>
    </div>
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
            ref="table"
            size="middle"
            :scroll="{ x: true }"
            row-key="year"
            :columns="columns"
            :data-source="dataSource"
            :pagination="ipagination"
            :loading="loading"
            class="j-table-force-nowrap"
            @change="handleTableChange"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        >
            <template slot="htmlSlot" slot-scope="text">
            <div v-html="text" />
            </template>
            <template slot="name" slot-scope="">
              {{'塘栖镇'}}
            </template>
            <template slot="plantArea" slot-scope="text">
              {{text||0}}
            </template>
            <template slot="fruitsOutput" slot-scope="text">
              {{text||0}}
            </template>
            <template slot="industryProduction" slot-scope="text">
              {{text||0}}
            </template>
            <template slot="plantGarden" slot-scope="text">
              {{text||0}}
            </template>
            <template slot="plantPeople" slot-scope="text">
              {{text||0}}
            </template>
            <template slot="company" slot-scope="text">
              {{text||0}}
            </template>
            <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
            <img
                v-else
                :src="getImgView(text)"
                height="25px"
                alt=""
                style="max-width: 80px; font-size: 12px; font-style: italic"
            />
            </template>
            <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
            <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
                下载
            </a-button>
            </template>
            <span v-if="!switchStatus" slot="action" slot-scope="text, record">
            <a @click="handleDetails(record)">查看</a>
            <a-divider type="vertical" />
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="clickdelete(record.year)">删除</a>
            </span>
        </a-table>
    </div>
    <village-industry-modal ref="modalForm" @ok="modalFormOk"></village-industry-modal>
  </a-card>
</template>

<script>
  import { httpAction ,getActionss} from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import villageIndustryModal from './modal/villageIndustryModal.vue'
  import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
  import YearSelect from '@/components/jeecg/YearDateSelect.vue'
  import { delPlantGeneral,dpimporTemplet } from '@/api/dashboardPaltform'
  export default {
    name: 'villageIndustryList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      YearSelect,
      JDictSelectTag,
      villageIndustryModal,
    },
    data () {
      return {
        file:undefined,
        flag:false,
        createTime:[],
        positionList:[],
        description: '各行政村枇杷产业情况',
        // 表头
       columns: [
            { title: '年份', dataIndex: 'year',},
            { title: '行政区规划', dataIndex: 'name',scopedSlots: { customRender: 'name' }},
            { title: '种植面积(亩)', dataIndex: 'plantArea',scopedSlots: { customRender: 'plantArea' } },
            { title: '鲜果产量(吨)', dataIndex: 'fruitsOutput',scopedSlots: { customRender: 'fruitsOutput' } },
            { title: '产业产值(万元)', dataIndex: 'industryProduction',scopedSlots: { customRender: 'industryProduction' } },
            { title: '种植果园数(个)', dataIndex: 'plantGarden',scopedSlots: { customRender: 'plantGarden' } },
            { title: '种植户人数(人)', dataIndex: 'plantPeople',scopedSlots: { customRender: 'plantPeople' } },
            { title: '生产加工企业(家)', dataIndex: 'company',scopedSlots: { customRender: 'company' } },
            {
            title: '操作',
            dataIndex: 'action',
            align: 'left',
            fixed: 'right',
            width: 147,
            scopedSlots: { customRender: 'action' },
            },
        ],  
        dataSource:[],
        innerData:[],
        isorter:{
        },
        url: {
          list: "/plantGeneral/queryPage",
          delete: "/plantGeneral/del",
          importExcelUrl: '/plantGeneral/importExcel',
          exportXlsUrl: '/plantGeneral/exportExcel',
        },
        dictOptions:{},
      }
    },
    mounted() {
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    methods: {
      beforeUpload(logoFile){
          const isLt2M = logoFile.size / 1024 / 1024 < 2
          if (!isLt2M) {
            this.$message.error('导入文件大小不能超过2MB!')
            return false
          }else{
            this.flag = false
            this.file = logoFile
          }
        },
        handleImportExcel(info){
          console.log(info);
           this.flag = false
          if (info.file.status === 'done') {
              if (info.file.response.success) {
          if (info.file.response.code === 201) {
                const { message, result: { msg, fileUrl, fileName }} = info.file.response
                const href = window._CONFIG['domianURL'] + fileUrl
                this.$warning({
                  title: message,
                  content: (
                    <div>
                      <span>{msg}</span><br/>
                      <span>具体详情请 <a href={href} target='_blank' download={fileName}>点击下载</a> </span>
                    </div>
                  )
                  })
                } else {
                  this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
                }
                this.loadData()
              }else if(info.file.response.code===501){
                this.confirmUpload()
              } else {
                this.flag = false
                this.$message.error(`${info.file.name} ${info.file.response.message}.`)
              }
          } else if (info.file.status === 'error') {
            this.$message.error(`文件上传失败: ${info.file.msg} `)
          }
        },
        confirmUpload(){
            this.$confirm({
            title: '导入数据的年份与现有年份重复，是否覆盖？',
            onOk: () => {
              this.flag = true
            //  this.$refs["importFile"].$el.click()
            this.dpimporTemplet()
            },
            onCancel() {
              console.log('Cancel')
            },
            centered: true,
          })
        },
        async dpimporTemplet() {
          const formData = new FormData();
          formData.append('flag', this.flag);
          formData.append('file', this.file);
          let params = formData 
          httpAction(this.url.importExcelUrl,params,'post').then((res)=>{
              if(res.success){
                this.$message.success(res.message)
                this.searchQuery()
              }else{
                this.$message.error(res.message)
              }
          })
        },
        //下载模板
        DownloadModel(){
         getActionss('/plantGeneral/imporTemplet').then(res=>{
          const fileName = '各行政村枇杷产业情况.xls';
          let blob = new Blob([res], {
            type: 'application/vnd.ms-excel',
          });
          let downE = document.createElement('a');
          let href = window.URL.createObjectURL(blob);
          downE.href = href;
          downE.download = fileName;
          document.body.appendChild(downE);
          downE.click();
          document.body.removeChild(downE);
          window.URL.revokeObjectURL(href);
         })
       },
       //导出
        DownloadData(IDS){
         let year = IDS.join(',')
         getActionss('/plantGeneral/exportExcel',{year:year}).then(res=>{
          const fileName = '各行政村枇杷产业情况.xls';
          let blob = new Blob([res], {
            type: 'application/vnd.ms-excel',
          });
          let downE = document.createElement('a');
          let href = window.URL.createObjectURL(blob);
          downE.href = href;
          downE.download = fileName;
          document.body.appendChild(downE);
          downE.click();
          document.body.removeChild(downE);
          window.URL.revokeObjectURL(href);
         })
       },
        clickdelete(id) {
          this.$confirm({
            title: '您确定要删除该条记录吗？',
            onOk: () => {
              this.delPlantGeneral(id)
            },
            onCancel() {
              console.log('Cancel')
            },
            centered: true,
          })
        },
        async delPlantGeneral(val) {
            let res = await delPlantGeneral({year:val})
            if(res.success){
              this.$message.success(res.message)
              this.searchQuery()
            }else{
              this.$message.error(res.message)
            }
        },
        initDictConfig(){
        }
    }
  }
</script>
<style scoped lang="less">
  @import '~@assets/less/common.less';
.table-page-search-wrapper{
/deep/ .ant-calendar-range-picker-input{
    font-size: 12px
  }
}
</style>